<template>
	<el-container>
		<el-header>
            <div class="left-panel">
                <div class="finish">
                    <div class="finishNum">合计:<div class="text">{{ balance_total }}</div></div>
                </div>
            </div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.keyword" placeholder="关键词" clearable @input="upsearch"></el-input>
					<el-input v-model="search.customer_name" placeholder="客户名(精确)" clearable @input="upsearch"></el-input>
                    <el-input v-model="search.search_keyword"  class="input-with-search" style="width: 300px" @input="upsearch">
                        <template #prepend>
                            <el-select v-model="search.search_field" placeholder="请选择" style="width: 110px">
                                <el-option label="别名" value="help_number"/>
                                <el-option label="联系方式" value="mobile"/>
                            </el-select>
                        </template>
                    </el-input>
					<el-select v-model="search.area_id" placeholder="地区" filterable clearable>
                        <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border @setExtend="setExtend" tableName="receiveTable" :column="column">
				<el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
				<el-table-column type="index" label="序号" fixed align="center" width="60"></el-table-column>
                <template #operation="scope">
                    <div class="buttonFlex">
                        <el-button type="success" size="small" @click="table_sz_show(scope.row, scope.$index)" v-auth="'receive.print'">收支簿展示</el-button>
                        <el-button type="primary" size="small" @click="table_payment(scope.row, scope.$index)" v-auth="'receive.collection'">收款</el-button>
                        <el-button type="success" size="small" @click="table_record(scope.row, scope.$index)" v-auth="'receive.record'">收款记录</el-button>
                    </div>
                </template>
                <!-- <el-table-column label="客户名" prop="customer_name" align="center"></el-table-column>
                <el-table-column label="别名" prop="help_number" align="center"></el-table-column>
                <el-table-column label="联系方式" prop="mobile" align="center"></el-table-column>
                <el-table-column label="地区" prop="area_name" align="center"></el-table-column>
                <el-table-column label="账号结余" prop="balance" align="center"></el-table-column>
				<el-table-column label="操作" align="center" width="300">
					<template #default="scope">
                        <div class="buttonFlex">
							<el-button type="success" size="small" @click="table_sz_show(scope.row, scope.$index)" v-auth="'receive.print'">收支簿展示</el-button>
							<el-button type="primary" size="small" @click="table_payment(scope.row, scope.$index)" v-auth="'receive.collection'">收款</el-button>
							<el-button type="success" size="small" @click="table_record(scope.row, scope.$index)" v-auth="'receive.record'">收款记录</el-button>
                        </div>
					</template>
				</el-table-column> -->
			</scTable>
		</el-main>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
    <record-list v-if="dialog.record" ref="recordDialog" @success="handleSuccess" @closed="dialog.record = false" :query="{customer_id: customer_id}"></record-list>
    <el-dialog title="打印" width="500" v-model="dialog.print_select" align-center draggable overflow>
        <el-form label-position="top">
            <el-form-item label="日期范围"> 
                <el-date-picker v-model="print_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="open_print">打 印</el-button>
        </template>
    </el-dialog>
    <sz-print v-if="dialog.print" ref="printDialog" @success="handleSuccess" @closed="dialog.print = false"></sz-print>
</template>

<script>
import RecordList from './recordList.vue'
import saveDialog from './save'
import szPrint from './szPrint.vue'

export default {
	name: '客户列表',
	components: {
		saveDialog, RecordList, szPrint
	},
	data() {
		return {
			dialog: {
				save: false,
				record: false,
				print_select: false,
			},
			apiObj: this.$API.basic.client.list,
			selection: [],
			search: {
                apply_name: null,
                search_keyword: null,
                search_field: "help_number",
                area_id: null,
			},
            areaList: [],
            balance_total: 0,
            customer_id: "",
            customer_name: "",
            print_date: [this.moment().subtract(1, 'days').format('YYYY-MM-DD'), this.moment().format('YYYY-MM-DD')],
            column: [
                {label: "客户名", prop: "customer_name"},
                {label: "别名", prop: "help_number"},
                {label: "联系方式", prop: "mobile"},
                {label: "地区", prop: "area_name"},
                {label: "账号结余", prop: "balance"},
                {label: "操作", prop: "operation", width: "300"},
            ],
		}
	},
	mounted() {
		this.getArea();
	},
	methods: {
        setExtend(data){
            this.balance_total = data.balance_total
        },
		//付款
		table_payment(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
        // 付款记录
        table_record(row) {
            this.customer_id = row.id
			this.dialog.record = true
			this.$nextTick(() => {
				this.$refs.recordDialog.open('edit').setData(row)
			})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		refresh() {
			for (const key in this.search) {
				this.search[key] = null;
			}
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			}
		},
        // 地区列表
		async getArea() {
			var res = await this.$API.basic.area.all.get();
			this.areaList = res.data
		},

        // 打印选择弹窗
        table_sz_show(row){
            this.customer_id = row.id;
            this.customer_name = row.customer_name;
            this.dialog.print_select = true;
        },
        // 确定打印
        open_print(){
            let query = {
                id: this.customer_id,
                customer_name: this.customer_name,
                print_date: this.print_date,
            }
            this.dialog.print_select = false;
            this.dialog.print = true;
            this.$nextTick(() => { 
                this.$refs.printDialog.open('print').setData(query)
            })
            this.print_date = [this.moment().subtract(1, 'days').format('YYYY-MM-DD'), this.moment().format('YYYY-MM-DD')]
        },
	}
}
</script>

<style></style>
